<template>
  <div class="box">
      <van-nav-bar left-arrow @click-left="onClickLeft" size="18px" color="#000"/>
   
    <h1>请选择适合你的标签</h1>
    <h1 class="hh">(最多三个)</h1>
    <div class="box2" ref="box2" @click="top($event)" >
      <p>减肥燃脂</p>
      <p>拉伸修复</p>
      <p>态度纠正</p>
      <p>身体协调</p>
      <p>身心放松</p>
      <p>力量提升</p>
      <p>产后修复</p>
    </div>
    <van-button type="primary" size=large class="btn-l" to='/xuan'>下一步</van-button>

  </div>
</template>

<script>
export default {
  name: "Mybiao",
  data() {
    return {
      list: [],
      color: "green"
    };
  },

  methods: {

      onClickLeft() {
     this.$router.go(-1)
    },
    top(e) {
    
      if (e.target.localName == "p") {


         
        if (e.target.style.background != this.color) {
         
            e.target.style.background = 'green';
        } 
        else{

          e.target.style.background = '#fff'
        }


        if( e.target.style.background == 'green'){

           
            this.list.push(e.target.innerHTML)
              if(this.list.length>3){
    
    
    e.target.style.background = '#fff'


              }
             

        }
        if(e.target.style.background != 'green'){
       
          let i=this.list.indexOf(e.target.innerHTML)
      
          this.list.splice(i,1)

        }

      }
    }
  }
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0
}
.box {
  width: 100%;
  overflow: hidden;
  padding: 140px 20px 0 20px;
  box-sizing: border-box;
  text-align: center;
}
.box2 p {
  width: 150px;
  height: 50px;
  border: 1px solid #000;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
 margin: 10px 0
}
.hh{
  margin-bottom:20px 
}
.box2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box .btn-l{

      position: absolute;
    bottom: 0px;
    left: 0
   }
    .van-nav-bar{
     position: fixed;
     top:0;
     left: 0;
   }
</style>
